<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>设备详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
    <link rel="stylesheet" href="/style/jquery.contextMenu.min.css">
    <link rel="stylesheet" href="/style/jquery.jsonview.min.css">
</head>

<body>

<div class="layui-fluid" id="LAY-app-message">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">人员信息</li>
                <li>人员证件</li>
                <li>人员文件</li>
            </ul>
            <div class="layui-tab-content">
                <!--基础信息-->
                <div class="layui-tab-item layui-show">
                    <form class="layui-form" action="#" lay-filter="user-form">
                        <div class="LAY-app-message-btns" style="margin-bottom:20px;">
                            <button class="layui-btn layui-btn-sm" lay-submit lay-filter="user-apply">
                                应用
                            </button>
                            <button class="layui-btn layui-btn-sm layui-btn-primary" lay-submit
                                    lay-filter="user-info-refresh">刷新
                            </button>
                        </div>
                        <input type="hidden" name="id">
                        <div class="layui-row">
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">*姓名</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="name" class="layui-input" lay-verify="required">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">*手机号</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="mobile" class="layui-input" lay-verify="required">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">性别</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="gender" class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">*年龄</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="age" class="layui-input" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">学历</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="education" class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">*出生日期</label>
                                    <div class="layui-input-block">
                                        <input id="select-birthday" type="text" name="birthday" class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">*入职时间</label>
                                    <div class="layui-input-block">
                                        <input id="select-entry-date" type="text" name="entryDate" class="layui-input">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <!--人员证件-->
                <div class="layui-tab-item">
                    <div class="LAY-app-message-btns" style="margin-bottom: 18px;">
                        <button id="user-license-add-btn" class="layui-btn layui-btn-sm">添加</button>
                        <button id="user-license-refresh-btn"
                                class="layui-btn layui-btn-primary layui-btn-sm">刷新
                        </button>
                        <button id="user-license-delete-btn" class="layui-btn  layui-btn-sm layui-btn-danger">删除
                        </button>
                    </div>
                    <table id="user-license-table" lay-filter="user-license-table"></table>
                    <script type="text/html" id="user-license-toolbar">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">详情</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
                <!--人员文件-->
                <div class="layui-tab-item">
                    <div class="LAY-app-message-btns" style="margin-bottom: 18px;">
                        <button id="user-file-add-btn" class="layui-btn layui-btn-sm">添加</button>
                        <button id="user-file-refresh-btn"
                                class="layui-btn layui-btn-primary layui-btn-sm">刷新
                        </button>
                    </div>
                    <table id="user-file-table" lay-filter="user-file-table"></table>
                    <script type="text/html" id="user-file-toolbar">
                        <a class="layui-btn layui-btn-xs" lay-event="download">下载</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
                <script type="text/html" id="user-license-form">
                    <div class="layui-card">
                        <div class="layui-card-header">人员证件详情</div>
                        <div class="layui-card-body">
                            <form class="layui-form" action="#" lay-filter="user-license-form">
                                <input type="hidden" name="id">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">证件名称*</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="name" class="layui-input" lay-verify="required">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">证件编号*</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="no" class="layui-input" lay-verify="required">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">发证机构*</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="issueOrg" name="issueOrg" class="layui-input"
                                               lay-verify="required">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">发证日期*</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="issueDate" name="issueDate"
                                               class="layui-input user-info-date" lay-verify="required">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">有效期起*</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="startDate" name="startDate"
                                               class="layui-input user-info-date">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">有效期至</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="endDate" name="endDate"
                                               class="layui-input user-info-date">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">复审日期</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="recheckDate" name="recheckDate"
                                               class="layui-input user-info-date">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">备注</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="note" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="form-submit">确定
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </script>
            </div>
        </div>
    </div>
</div>

<script src="/layui/layui.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/clipboard.min.js"></script>
<script src="/js/common.js"></script>
<script>

    layui.config({
        base: '/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form', 'laytpl', 'upload', 'laydate'], function () {
        var $ = layui.$;
        var table = layui.table;
        var form = layui.form;
        var upload = layui.upload;
        var id = getParam("id");
        var laydate = layui.laydate;
        var admin = layui.admin;

        upload.render({
            elem: '#user-file-add-btn',
            url: '/user-files/upload/' + id,
            accept: 'file',
            done: function (result) {
                if (result.code == 200) {
                    layer.msg('上传成功');
                    table.reload('user-file-table');
                } else {
                    layer.msg('上传失败：' + result.msg);
                }
            },
            error: function () {
                layer.msg('上传失败');
            }
        });

        function closePopupForm() {
            if (popupIndex) {
                layer.close(popupIndex);
            }
        }

        $("#user-license-delete-btn").on('click', function () {
            layer.confirm('确定要删除吗?', {icon: 3, title: '提示'}, function (index) {
                var ids = [];
                var data = table.checkStatus('user-license-table').data;
                console.log('data', data);
                for (let i in data) {
                    ids.push(data[i].id);
                }
                $.ajax({
                    url: 'user-licenses/' + ids.toString(),
                    type: 'DELETE',
                    success: function (result) {
                        if (result.code == 200) {
                            layer.msg('删除成功');
                            table.reload('user-license-table');
                        } else {
                            layer.msg('删除失败');
                        }
                    }
                });
            });
        });


        table.render({
            elem: '#user-file-table',
            url: '/user-files',
            title: '人员相关文件',
            skin: 'line',
            cols: [[
                {type: 'checkbox'},
                {
                    title: '序号', width: 60, templet: function (d) {
                        return d.LAY_TABLE_INDEX + 1;
                    }
                },
                {field: 'name', title: '文件名'},
                {field: 'createTime', title: '上传时间'},
                {fixed: 'right', title: '操作', toolbar: '#user-file-toolbar'}
            ]],
            page: true
        });

        function showUserLicenseForm() {
            popupIndex = admin.popupRight({
                area: '420px',
                success: function () {
                    var formHtml = $('#user-license-form').html();
                    $('#' + this.id).html(formHtml);
                    laydate.render({
                        elem: '#issueDate',
                        type: 'date',
                        trigger: 'click'
                    });
                    laydate.render({
                        elem: '#startDate',
                        type: 'date',
                        trigger: 'click'
                    });
                    laydate.render({
                        elem: '#endDate',
                        type: 'date',
                        trigger: 'click'
                    });
                    laydate.render({
                        elem: '#recheckDate',
                        type: 'date',
                        trigger: 'click'
                    });
                    form.render();
                }
            });
            return popupIndex;
        }

        $("#user-license-add-btn").on('click', function () {
            popupIndex = showUserLicenseForm();
        });

        $("#user-license-refresh-btn").on('click', function () {
            table.reload('user-license-table');
            layer.msg('表格已刷新');
        });


        table.render({
            elem: '#user-license-table',
            url: '/user-licenses',
            title: '人员证件',
            skin: 'line',
            cols: [[
                {type: 'checkbox'},
                {
                    title: '序号', width: 60, templet: function (d) {
                        return d.LAY_TABLE_INDEX + 1;
                    }
                },
                {field: 'name', title: '证件名称'},
                {field: 'no', title: '证件编号'},
                {field: 'issueOrg', title: '发证机构'},
                {field: 'issueDate', title: '发证日期'},
                {field: 'startDate', title: '有效期起'},
                {field: 'endDate', title: '有效期至'},
                {field: 'recheckDate', title: '复审日期'},
                {field: 'note', title: '备注'},
                {fixed: 'right', title: '操作', toolbar: '#user-license-toolbar'}
            ]],
            page: true
        });

        form.on('submit(form-submit)', function (data) {
            data.field.userId = id;
            $.ajax({
                url: 'user-licenses',
                type: 'PUT',
                data: data.field,
                success: function (result) {
                    if (result.code == 200) {
                        layer.msg('操作成功');
                        table.reload('user-license-table');
                    } else {
                        layer.msg('提交失败');
                        console.error('提交失败');
                    }
                }
            });
            closePopupForm();
            return false;
        });


        loadUserInfo();

        /**
         * 加载设备信息
         */
        function loadUserInfo() {
            $.ajax({
                url: "users/" + id,
                success: function (result) {
                    laydate.render({
                        elem: '#select-birthday',
                        type: 'date'
                    });
                    laydate.render({
                        elem: '#select-entry-date',
                        type: 'date'
                    });
                    if (result.code == 0 && result.data) {
                        var data = result.data;
                        form.val('user-form', data);
                        form.render();
                    } else {
                        layer.msg('平台无此用户');
                    }
                }
            });
        }

        /*工具栏区*/
        /*设备信息页*/
        form.on('submit(user-apply)', function (data) {
            if (checkGuest()) {
                return false;
            }
            data.field.id = id;
            $.ajax({
                url: 'users',
                method: 'PUT',
                data: data.field,
                success: function (result) {
                    if (result.code == 200) {
                        layer.msg("修改成功");
                        loadUserInfo();
                    } else {
                        layer.alert(result.msg, {
                            skin: 'layui-layer-molv'
                        });
                    }
                }
            });
            return false;
        });

        form.on('submit(user-info-refresh)', function (data) {
            loadUserInfo();
            layer.msg("设备信息已刷新");
            return false;
        });

        table.on('tool(user-file-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除该记录吗？', function (index) {
                    $.ajax({
                        url: '/user-files/' + data.id,
                        type: 'DELETE',
                        success: function (result) {
                            if (result.code == 200) {
                                layer.msg('删除成功');
                                table.reload('user-file-table');
                            } else {
                                layer.msg('删除失败');
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'download') {
                window.open("/user-files/download/" + data.uuid);
            }
        });

        table.on('tool(user-license-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除该记录吗？', function (index) {
                    $.ajax({
                        url: '/user-licenses/' + data.id,
                        type: 'DELETE',
                        success: function (result) {
                            if (result.code == 200) {
                                layer.msg('删除成功');
                                table.reload('user-license-table');
                            } else {
                                layer.msg('删除失败');
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                showUserLicenseForm();
                form.val('user-license-form', data);
            }
        });

        $('#user-file-refresh-btn').on('click', function () {
            console.log('user-file-refresh-btn');
            table.reload('user-file-table');
        });

    });
</script>
</body>

</html>